<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			<el-divider direction="vertical"></el-divider>
			<h5>标签总量：{{ allLabelData.all }}个</h5>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="requestParams.name" clearable placeholder="标签名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<div slot="component" class="label_pool_body">
			<el-card shadow="never" v-for="(item, index) in labelPoolData" :key="index" :header="item.label">
				<div class="item" v-for="(n, i) in item.children" :key="i">
					<span class="title" @click="handleSearchResource(n)">{{ n.name }}({{ n.amount || '0' }})</span>
					<el-dropdown size="medium" @command="handleDropdownCommand($event, n)">
						<span class="el-icon-more"></span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="delete">删除标签</el-dropdown-item>
							<el-dropdown-item command="clear">清空标签</el-dropdown-item>
							<el-dropdown-item command="move">移动标签</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-card>
		</div>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getLabelPoolList, deleteLabelPool } from '@/api/data/tbSysLabel';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '标签池',
			isChildren: false,
			requestParams: { sortBy: 1 }
		};
	},
	computed: {
		listFunction() {
			return eval(getLabelPoolList);
		},
		deleteFunction() {
			return eval(deleteLabelPool);
		},
		allLabelData() {
			return !this.tableData[0] ? {} : this.tableData[0];
		},
		labelPoolData() {
			let labelList = this.tableData.slice(1);
			return labelList.map((item) => {
				return {
					label: Object.keys(item)[0],
					children: Object.values(item)[0]
				};
			});
		}
	},
	methods: {
		handleSearchResource(data) {
			if (Number(data.amount) > 0) {
				this.$router.push({
					path: '/search/allsearch',
					query: { field: '3', type: 'query_string', value: data.name }
				});
			} else {
				this.$message.warning('暂无该标签对应的资源');
			}
		},
		handleDropdownCommand(command, data) {
			if (command === 'delete') {
				this.handleDeleteData(data);
			} else if (command === 'clear') {
			} else if (command === 'move') {
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.label_pool_body::v-deep {
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	.el-card:nth-child(n + 2) {
		margin-top: 16px;
	}
	.el-card__header {
		padding: 16px;
		font-size: 16px;
		font-weight: bold;
		line-height: 1;
		background-color: var(--primary-background-plain-disabled);
	}
	.el-card__body {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 16px;
		.item {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 6px 0;
			border-radius: 4px;
			box-sizing: border-box;
			color: var(--primary);
			border: solid 1px var(--primary-hover);
			background-color: var(--primary-background-plain);
			&:nth-child(n + 2) {
				margin-left: 12px;
			}
			&:hover {
				color: #fff;
				background-color: var(--primary-hover);
				.el-icon-more {
					color: #fff;
				}
			}
		}
		.title {
			cursor: pointer;
			padding: 8px 6px 8px 10px;
		}
		.el-icon-more {
			cursor: pointer;
			padding: 4px;
			margin-right: 6px;
		}
	}
}
</style>
